<template>
    <div :style="{height:'760px'}">
        <van-nav-bar
                :fixed="fixed"
                title="修改支付密码"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <div :style="{marginTop:'86px'}">
            <form @submit.prevent="setData">
                <van-cell-group>
                    <van-field
                            v-model="pass.password1"
                            type="password"
                            label="旧支付密码"
                            placeholder="请输入密码"
                            required
                    />

                    <van-field
                            v-model="pass.password2"
                            type="password"
                            label="新支付密码"
                            placeholder="请输入新密码"
                            required
                    />
                </van-cell-group>
                <router-link to="/forget" slot="left">
                    <button class="forget" :style="{border:'none'}">忘记支付密码?</button>
                </router-link>
                <div :style="{padding:'10px',marginTop:'50px'}">
                    <van-button size="large">确定</van-button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {NavBar } from 'vant';
    Vue.use(NavBar);
  export default {
    data(){
      return{
          fixed:true,
          pass:{}
      }
    },
    methods:{
      setData(){

      },
        onClickLeft() {
            this.$router.push({path:`/me`})
        }
    }
  }
</script>

<style scoped>
    .forget{
        font-size: 15px;
        /*color: blue;*/
        margin-top: 20px;
        float: right;
        background-color: #ffffff;
    }
    .style{
        color: #333333;
        width: 100%;
        border-bottom:1px solid #F6F6F6;
    }
     .button{
        width: 99%;
        margin-top: 50px;
    }
</style>
